<script setup lang="ts">
import { reactive, ref } from 'vue';
const a: string = 'hello world'
const price: number = 2.5
const count: number = 10
const age = 20
const isMarry = false
const money = 0
const skills = '写代码'
// 声明函数
const getContent = () => {
  return '这是声明的函数'
}
// 定义一个点击函数
const clickFn = (a: number, b: number, c: number) => {
  alert('点我干嘛' + a)
}
const changeValue = (event: Event) => {
  const inputDom = event.target as HTMLInputElement
  console.log('值为:', inputDom.value)
}
// 键盘事件
const enterClick = (event: KeyboardEvent) => {
  if (event.key === 'Enter') {
    alert('点击了回车')
  }
}
const changeSex = () => {
  person.sex = '女'
}

const person = reactive<{
  name: string,
  age: number,
  sex: '男' | '女'
}>({
  name: '张三',
  age: 24,
  sex: '男'
})
const isMarried = ref(false)

const people = ref<{ name: string, height: number, weight: number, money: number, childCount: number }>({
  name: '黑大帅',
  height: 180,
  weight: 75,
  money: 10000000,
  childCount: 5
})
const growthPeople = () => {
  people.value.money -= 100000
  people.value.childCount += 1
  people.value.weight += 10
  people.value.height -= 2
}

const weather = ref('晴转多云')
const mood = ref('乐悠悠')
const changeFace = () => {
  mood.value = `<h1 style='color:red'>我生气了</h1>`
}
</script>



<template>

  <div class="wrapper">
    {{ a.split("").reverse().join("") }}
    <p>总价为{{ price * count }}</p>
    <p>年龄为{{ `${age}岁` }}</p>
    <p>婚姻状态:{{ isMarry ? '已婚' : '未婚' }}</p>
    <p>存款状态:{{ money > 0 ? money : '穷光蛋' }}</p>
    <p>技能:{{ skills }}</p>
    <p>函数调用：{{ getContent() }}</p>
    <p>1 + 2 = {{ 1 + 2 }}</p>
    <button v-on:click="clickFn(1, 2, 3)">点击完整写法</button>
    <button @click="clickFn(1, 2, 3)">点击语法糖写法</button>
    <input type="text" @input="changeValue" @keydown="enterClick">
    <h1>响应式数据 Reactive - 只能是对象</h1>
    <p>姓名:{{ person.name }}</p>
    <p>年龄:{{ person.age }}</p>
    <p>性别:{{ person.sex }}</p>
    <button @click="person.sex = '女'">变性</button>
    <button @click="changeSex">函数变性</button>
  </div>
  <div>
    <h1>Ref的响应式数据-简单数据类型</h1>
    <p>婚姻状态:{{ isMarried ? '已婚' : '单身狗' }}</p>
    <h1>Ref的响应式数据-复杂数据类型</h1>
    <p>姓名:{{ people.name }}</p>
    <p>身高:{{ people.height }}</p>
    <p>体重:{{ people.weight }}</p>
    <p>财产:{{ people.money }}</p>
    <p>儿女个数:{{ people.childCount }}</p>
    <button @click="growthPeople">成长</button>
  </div>
  <div>

    <h1>v-text和v-html指令</h1>
    <div v-text="weather"></div>
    <div v-html="mood"></div>
    <button @click="weather = '晴'">变天</button>
    <button @click="changeFace">变脸</button>
  </div>

</template>

<style scoped>
@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>
